<template>
	<view>
		<u-navbar title="我的收藏">
			<view slot="right" class="navbar-right" @click="manage">
				{{ mask == true ? '完成' : '管理' }}
			</view>
		</u-navbar>
		<view class="goodsBox">
			<!-- 瀑布流 -->
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="box" style="margin-right: 10upx;">
						<view class="items" @click.stop.prevent="toDetail(item.id)" v-for="(item, index) in leftList" :key="index+item">
							<image :src="item.Imgurl" mode="widthFix"></image>
							<view class="content">
								<view class="title">
									<view>{{item.title}}</view>
								</view>
								<view class="bottom">
									<view class="left">￥<text class="price">{{item.price}}</text></view>
									<view class="right">销量:1520</view>
								</view>
							</view>
							<view class="mask" @click.stop.prevent="checkedFun(index,leftList)" v-if="mask"></view>
							<view class="checked" v-if="mask" :class="item.checked == true ? 'checked-color' : '' " @click.stop.prevent="checkedFun(index,rightList)">
								<image src="../../static/img/checkedGou.png" mode="" v-if="item.checked"></image>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="box" style="margin-left: 10upx;">
						<view class="items" @click="toDetail(item.id)" v-for="(item, index) in rightList" :key="index+item">
							<image :src="item.Imgurl" mode="widthFix"></image>
							<view class="content">
								<view class="title">
									<view>{{item.title}}</view>
								</view>
								<view class="bottom">
									<view class="left">￥<text class="price">{{item.price}}</text></view>
									<view class="right">销量:1520</view>
								</view>
							</view>
							<view class="mask" v-if="mask" @click.stop.prevent="checkedFun(index,rightList)">

							</view>
							<view class="checked" v-if="mask" :class="item.checked == true ? 'checked-color' : '' " @click.stop.prevent="checkedFun(index,rightList)">
								<image src="../../static/img/checkedGou.png" mode="" v-if="item.checked"></image>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
		<view class="btnBox" v-if="mask">
			
		</view>
		<view class="del_poup" v-if="mask">
			<view class="left" @click="allChecked()">
				<view class="Allcheck" :class="selectAll == true ? 'checked-color' : ''"><image src="../../static/img/checkedGou.png" mode="" v-if="selectAll"></image></view>
				<view class="text">全选</view>
			</view>
			<view class="right" @click="deleteList">
				删除
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectAll:false,
				mask: false,
				delList:[],
				flowList: [],
				goodList: [{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						number: 1420,
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
						id: 15
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						number: 1420,
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
						id: 1
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						number: 1420,
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						id: 12
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
						id: 11
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						id: 10
					}
				],
			}
		},
		onLoad(option) {
			this.addRandomData();
		},
		watch:{
			'flowList':{
				handler:function(newValue,oldVal) {
					
				}
			}
		},
		methods: {
			allChecked() {
				var left = this.$refs.uWaterfall.leftList;
				var right = this.$refs.uWaterfall.rightList;
				if(this.selectAll == false) {
					left.forEach(e=>{
						e.checked = true;
						this.delList.push(e.id);
					})
					right.forEach(e=>{
						e.checked = true;
						this.delList.push(e.id);
					})
					this.selectAll = true;
				}else{
					left.forEach(e=>{
						e.checked = false;
					})
					right.forEach(e=>{
						e.checked = false;
					})
					this.selectAll = false;
					this.delList = [];
				}
			},
			deleteList() {
				var list = this.delList;
				for(let i = 0;i< list.length ; i++){
					this.$refs.uWaterfall.remove(list[i]);
				}
			},
			manage() {
				this.mask ? this.mask = false : this.mask = true;
			},
			checkedFun(i,list) {
				list[i].checked == false  ? list[i].checked = true : list[i].checked = false;
				if(this.selectAll == true) {
					if(list[i].checked  == false) {
						let idx = this.delList.indexOf(list[i].id);
						this.delList.splice(idx,1)
					}
				}else{
					if(list[i].checked == true ) {
						this.delList.push(list[i].id);
					}
				}
			},
			toDetail(id) {
					uni.navigateTo({
						url: '/pages/goodsDetail/index?id=' + id
					})
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.goodList.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.goodList[index]))
					item.id = this.$u.guid();
					item.checked = false;
					this.flowList.push(item);
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
